临时接了个非常紧急的首页开屏广告的活动,然后开始找源码开始该以前的活动(每年偶尔会有几次这种活动都是直接套模板),然后因为相关人员都离职了,模板丢失,模板使用flash做的播放,但是有的浏览器判断flash有问题,比如某狐,然后因为播放一个大屏的广告视频,所以决定用video标签来直接做,然后发现了以下问题(本文章仅在mac上发现这个问题,windows未尝试)
video标签加上自动播放autoplay发现在chrome、火狐浏等览器上都不会自动播放
var id = "narnia"
var videoUrl = "http://xxxxx.mp4"
var width = "1280"
var height = "680"
var tempHtml = `<video id="homeVideo" width=${width} height=${height} src=${videoUrl} autoplay></video>`
查了好多原因,发现是浏览的问题,因为video可能加载各种视频,自动播放会有一定的不安全性。还有的说chrome怕声音突然出来,吓到你,不管是什么原因反正造成了以上问题反正就是不能播放
然后搜了一下解决方法,比如说去 chrome://flags/#autoplay-policy 设置成 no user gesture is required 就好了等等,我想说我一个用户还要去设置这个那你还写这个有什么用,用户只关心好不好用而已
然后最后在其他的答案中找到一项,在视频标签中加上 muted 就可以,然后尝试了一下的确是可以了,但是这个标签是静音,都静音了那我的自动播放其实也没啥用,然后查了各种其他解决办法问了好几个大神然后都没有其他办法,然后想了一下折中的办法:
- 因为无法自动播放必须要求用户去主动触发播放才能播放,然后加上muted可以静音自动播放
- 可以给用户加一个静音按钮,然后这个静音做的功能是取消静音+播放
-
为什么要加上播放呢,因为你加上muted随便自动播放了,但是你要把这个属性取消了,会再次回到暂停,立马取消播放
function openVoice() { var videoPlayer = document.getElementById("homeVideo") videoPlayer.muted = false videoPlayer.play() }
这个方法先去关闭静音,然后再调用了播放方法,这样就算是用户触发了播放就可以正常播放了,这样也算折中的解决了自动播放的问题,找了半天实在是没有找到其他办法,属在下才疏学浅,如果其他人有好的解决办法请指教!真心求教!!!
ps. 加上muted就可以自动播放,看来浏览器怕声音突然出来,吓到你这个还是挺接近的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。